<template>
    <div class="app">
        <myNavbar title="查询物流"></myNavbar>
        <list>
            <cell>
                <div class="logistics_item" v-for="item in logisticsData" >
                    <div class="logistics_item_header" v-if="item.subType == 0">
                        <div class="logistics_item_header_left">
                            <text class="logistics_item_header_title">{{item.trackingNo != null?'物流信息':'暂无物流信息'}}</text>
                        </div>
                        <text class="logistics_item_header_right" v-if="item.trackingNo != null">{{item.trackingNo}}</text>
                    </div>
                    <div class="logistics_item_header" v-if="item.subType == 1">
                        <div class="logistics_item_header_left">
                            <text class="logistics_item_header_title">套餐信息</text>
                        </div>
                        <!-- <text class="logistics_item_header_right" v-if="item.trackingNo != null">{{item.trackingNo}}</text> -->
                    </div>
                    <div class="logistics_product" @click="detailsClick(item.trackingNo)" v-if="item.subType == 0">
                        <div class="logistics_product_img">
                            <image style="width:100px;height:100px" :src="item.thumbnail"></image>
                        </div>
                        <div class="logistics_product_content">
                            <text class="logistics_product_content_title">{{item.name}}</text>
                            <text class="logistics_product_content_subtitle">{{item.spec}}</text>
                        </div>
                        <div class="logistics_product_icon_box">
                            <!--                        <text class="iconfont icon-arrow logistics_product_icon"></text>-->
                            <icon style="width: 50px;height: 50px;" content="ios-arrow-forward"></icon>
                        </div>
                    </div>
                    <div class="logistics_product" v-if="item.subType == 1">
                        <div class="logistics_product_img">
                            <image style="width:100px;height:100px" :src="item.thumbnail"></image>
                        </div>
                        <div class="logistics_product_content">
                            <text class="logistics_product_content_title">{{item.name}}</text>
                            <text class="logistics_product_content_subtitle">{{item.spec}}</text>
                        </div>
                    </div>
                    <text class="logistics_date" v-if="item.subType == 0">{{item.createDate}}</text>
                </div>
            </cell>
        </list>
    </div>

</template>

<script>
    import {
        trackingNo_query,delivery_query
    } from '../../../api/shipping'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data(){
            return{
                logisticsData: [],
                id: '',
            }
        },
        created(){
            this.id = eeui.getPageInfo('orderDetails').params
            this.findClick()
        },
        components:{
          myNavbar
        },
        methods:{
            findClick() {
                var _this = this
                trackingNo_query({ orderId: _this.id, pageNum: 1, pageSize:10}).then(
                    res => {
                        if (res.type == 'success') {
                            _this.logisticsData = res.data.data
                            _this.logisticsData.forEach(function(item) {
                                item.createDate = _this.formatTime(item.createDate)
                            });
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            detailsClick(data) {
                var _this = this
                if (!this.isEmptyString(data)) {
                    delivery_query({
                        trackingNo: data
                    }).then(res => {
                        console.info("物流详情信息")
                            console.info(res)
                        if (res.type == 'success') {
                            eeui.openPage({
                            pageName: 'logisticsList',
                            params: data,
                            url: 'root://pages/member/logistics/details.js',
                            statusBarType: 'immersion',
                            statusBarStyle:false
                        },
                        (result) => {
                        }
                    );
                        }
                    }).catch(error => {
                        // eeui.toast(error.content)
                    })
                } else {
                    eeui.toast('暂无物流信息')
                }
            },
        }
    }
</script>

<style scoped>
    .app,body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .logistics_item {
        width: 700px;
        background-color: white;
        border-radius: 16px;
        margin-left: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .logistics_item_header {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
    }

    .logistics_item_header_left {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .logistics_item_header_img {
        width: 40px;
        height: 40px;
        background-color: rgba(249, 249, 249, 1);
        border-radius: 4px;
    }

    .logistics_item_header_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        /* margin-left: 12px; */
    }

    .logistics_item_header_right {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .logistics_product {
        display: flex;
        flex-direction: row;
        position: relative;
        margin-bottom: 10px;
    }

    .logistics_product_img {
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 4px;
    }

    .logistics_product_content {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        width: 460px;
    }

    .logistics_product_content_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines:2;
        width: 460px
    }

    .logistics_product_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        display: block;
        width: 460px;
        text-overflow: ellipsis;
        lines:1;
    }

    .logistics_product_icon_box {
        /*height: 100%;*/
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
    }

    .logistics_product_icon {
        font-size: 28px;
        color: rgba(42, 42, 54, 1);
        opacity: 0.3;
    }

    .logistics_date {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
